<template>
    <div class="cardCoutainer" @click="clickToCheck" :style="{minWidth:`${props.cardWidth}px`,minHeight:`${props.cardHeight}px`}">
        <div class="cardNav">
            <div class="circle" :style="{backgroundColor:data.is_solved ? 'rgb(238, 255, 0)':'rgb(0, 255, 34)'}">
            </div>
            <span class="userText">{{ data.username }}</span>
        </div>
        <div class="cardAside">
            <div class="tag">
                <span>{{ data.questionname }}</span>
            </div>
            <div class="qsInformation">
                <span>QID:{{data.id}}</span>
            </div>
        </div>
        <div class="cardMain"><span class="titleText">{{data.title}}</span></div>
        <div class="cardFooter">
            
            
            <span class="idText"><el-icon><View /></el-icon>  {{ data.view_count }}</span>
            <span class="idText"><el-icon><ChatDotRound /></el-icon>  {{ data.answer_count }}</span>
            <span class="idText"><el-icon><Calendar /></el-icon>  {{ formatRelativeTime(data.created) }}</span>
            
        </div>
        
    </div>
</template>

<script lang="ts" setup>
import {formatStandardDate,formatRelativeTime} from '../utils/date'


const props=withDefaults(defineProps<{
    cardWidth?:number
    cardHeight?:number
    data:{
        id: number,
        title: string,
        username: string,
        view_count: number,
        answer_count: number,
        is_solved: number,
        questionname: string,
        created: Date
    }
    
}>(),{
    cardWidth:300,
    cardHeight:60,
})

const emit =defineEmits<{
    (e:'learnMore',questionIdWantToLearn:number):void
}>()

const clickToCheck = function(){
    emit('learnMore',props.data.id)
}


</script>

<style scoped>
.qsInformation{
    text-align: center;
    font-size: 10px;
    color: rgb(255, 255, 255,0.6);
}

.circle{
    width: 12px; 
    height: 12px;
    border-radius: 100%;
    text-align: center;
}

.tag{
    border-radius: 10px;
    background-color: rgb(50, 84, 184);
    padding: 1px;
    text-align: center;
    font-size: 12px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 500;
    color: rgb(0, 251, 255);
}

.userText{
    font-size: 90%;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(255, 255, 255,0.8);
}

.idText{
    font-size: 90%;
    font-family: monospace;
    color: rgb(255, 255, 255,0.9);
}

.titleText{
    font-size: 85%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 600;
    color: rgb(255, 255, 255,0.9);
}

.cardCoutainer{
    display: grid;
    grid-template-columns: 8fr 1fr;
    grid-template-rows: 1fr 2fr 1fr;
    grid-template-areas: 
    "Nav Aside"
    "Main Aside"
    "Footer Aside";
    border: 1px solid rgb(255, 255, 255,0.7);
    border-radius: 15px;
    gap: 8px;
    padding: 10px;
    transition: all ease 0.3s;
    cursor: pointer;
    -webkit-user-select: none; /* Safari、Chrome 等 */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE、Edge */
    user-select: none; /* 标准语法 */
}

.cardCoutainer:hover{
    background-color: rgb(255, 255, 255,0.2);
    box-shadow: 1px 1px 12px rgb(255, 255, 255);
}

.cardNav{
    grid-area: Nav;
    display: flex;
    align-items: center;
    gap: 24px;

}

.cardMain{
    grid-area: Main;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.cardFooter{
    grid-area: Footer;
    display: flex;
    align-items: center;
    gap: 5%;
}

.cardAside{
    grid-area: Aside;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 5px;
}

</style>